<template>
  <div class="carousel-div">
    <template v-if="items.length >0">
      <div id="demo" class="carousel slide" data-ride="carousel">
        <!-- 指示符 -->
        <ul class="carousel-indicators">
          <li data-target="#demo" data-slide-to="0" class="active"></li>
          <li data-target="#demo" :data-slide-to="index+1" v-for="(item,index) in items.slice(1)"></li>
        </ul>
        <!-- 轮播图片 -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <!--<div class="carousel-caption">-->
              <!--<h3>{{items[0].couponAmount}}</h3>-->
              <!--<p>{{items[0].name}}</p>-->
            <!--</div>-->
            <a target="_blank" :href="items[0].couponLink">
              <img class="img-responsive" :src="items[0].mainImg" />
            </a>
          </div>
          <div class="carousel-item" v-for="item in items.slice(1)">
            <!--<div class="carousel-caption">-->
              <!--<h3>{{item.couponAmount}}</h3>-->
              <!--<p>{{item.name}}</p>-->
            <!--</div>-->
            <a target="_blank"  :href="item.couponLink">
              <img  class="img-responsive" :src="item.mainImg" />
            </a>
          </div>
        </div>
        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
          <span class="carousel-control-prev-icon "></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
          <span class="carousel-control-next-icon "></span>
        </a>
      </div>
    </template>
  </div>
</template>

<script>
  import { mapState } from 'vuex';

  export default {
    name: 'carousel-info',
    props: {
      items: {
        type: Array,
        default () {
          return []
        }
      }
    },
    computed:{},
    data () {
      return {}
    },
    methods:{},
    mounted(){}
  }
</script>

<style scoped>
  /* Make the image fully responsive */
  .carousel-inner img {
    width: 100%;
    height: 50%;
  }
  .carousel-caption{
    color:black;
  }
  .carousel-control-prev carousel-control-next{
    color: blue;
  }
</style>
